<template>
  <div class="container">
    <a-row :gutter="24">
      <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        相关文档：
        <a href="https://www.antdv.com/components/table-cn#components-table-demo-nested-table" target="_blank">Ant Design Vue Table</a>
      </a-col>
    </a-row>

    <a-divider orientation="left">table</a-divider>

    <div>
      <a-table :columns="columns" :data-source="data" class="components-table-demo-nested">
        <template #bodyCell="{ column }">
          <template v-if="column.key === 'operation'">
            <a>Publish</a>
          </template>
        </template>
        <template #expandedRowRender>
          <a-table :columns="innerColumns" :data-source="innerData" :pagination="false">
            <template #bodyCell="{ column }">
              <template v-if="column.key === 'state'">
                <span>
                  <a-badge status="success" />
                  Finished
                </span>
              </template>
              <template v-else-if="column.key === 'operation'">
                <span class="table-operation">
                  <a>Pause</a>
                  <a>Stop</a>
                  <a-dropdown>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item>Action 1</a-menu-item>
                        <a-menu-item>Action 2</a-menu-item>
                      </a-menu>
                    </template>
                    <a>
                      More
                      <down-outlined />
                    </a>
                  </a-dropdown>
                </span>
              </template>
            </template>
          </a-table>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script lang="ts" setup name="DemoTable1">
import { DownOutlined } from "@ant-design/icons-vue";

const columns = [
  { title: "Name", dataIndex: "name", key: "name" },
  { title: "Platform", dataIndex: "platform", key: "platform" },
  { title: "Version", dataIndex: "version", key: "version" },
  { title: "Upgraded", dataIndex: "upgradeNum", key: "upgradeNum" },
  { title: "Creator", dataIndex: "creator", key: "creator" },
  { title: "Date", dataIndex: "createdAt", key: "createdAt" },
  { title: "Action", key: "operation" },
];

interface DataItem {
  key: number;
  name: string;
  platform: string;
  version: string;
  upgradeNum: number;
  creator: string;
  createdAt: string;
}

const data: DataItem[] = [];
for (let i = 0; i < 3; ++i) {
  data.push({
    key: i,
    name: `Screem ${i + 1}`,
    platform: "iOS",
    version: "10.3.4.5654",
    upgradeNum: 500,
    creator: "Jack",
    createdAt: "2014-12-24 23:12:00",
  });
}

const innerColumns = [
  { title: "Date", dataIndex: "date", key: "date" },
  { title: "Name", dataIndex: "name", key: "name" },
  { title: "Status", key: "state" },
  { title: "Upgrade Status", dataIndex: "upgradeNum", key: "upgradeNum" },
  {
    title: "Action",
    dataIndex: "operation",
    key: "operation",
  },
];

interface innerDataItem {
  key: number;
  date: string;
  name: string;
  upgradeNum: string;
}

const innerData: innerDataItem[] = [];
for (let i = 0; i < 3; ++i) {
  innerData.push({
    key: i,
    date: "2014-12-24 23:12:00",
    name: `This is production name ${i + 1}`,
    upgradeNum: "Upgraded: 56",
  });
}
</script>
